<template>
  <!-- 登录页 -->
  <view class="register">
    <view class="title">
      森林防火预警系统
    </view>
    <image src="../../static/image/bg.png" mode="widthFix" class="bg-img"></image>
    <view class="login-main">
      <view class="form">
        <view class="item" :class="'login_user ' + nameFocus">
          <input type="text" class="input-ui u-border" placeholder="请输入手机号" v-model.number="phone"
            @blur="isTelCode(phone)" />
          <view class="showPwd" @click="cleartext">
            <image class="text-icon-1" src="../../static/image/2.png"></image>
          </view>
        </view>
        <view class="item" :class="'login_pwd ' + psdFocus">
          <input type="text" class="input-ui u-border" placeholder="请输入密码" :type="type == 'password' ? 'text' : type"
            :password="!showPassword" v-model="password" />
          <view class="showPwd">
            <image class="text-icon-2" :src="showPassword ? '../../static/image/4.png' : '../../static/image/3.png'"
              @tap="showPassword = !showPassword"></image>
          </view>
        </view>
        <view class="item" :class="'login_pwd ' + psdFocus">
          <input type="text" class="input-ui u-border" placeholder="请确认密码" :type="type == 'password' ? 'text' : type"
            :password="!showPassword" v-model="password2" />
          <view class="showPwd">
            <image class="text-icon-2" :src="showPassword ? '../../static/image/4.png' : '../../static/image/3.png'"
              @tap="showPassword = !showPassword"></image>
          </view>
        </view>
        <view class="item" :class="'login_user ' + nameFocus">
          <input type="text" class="input-code" placeholder="请输入验证码" v-model="code" />
          <view class="getcode">
            <view @click="get" v-show="ok == 0">获取验证码</view>
            <view v-show="ok == 1">{{countTime}}</view>
          </view>
        </view>
        <view class="login-btn" @click="register()">注&nbsp;&nbsp;&nbsp;册</view>
      </view>
      <!-- 提示信息框 -->
      <view class="msg" :style="{'top':top+'rpx'}">
        <view class="text">
          {{msg}}
        </view>
        <view class="yes" @click="changetop">
          确定
        </view>
      </view>
    </view>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        nameFocus: '',
        password: '',
        password2: '',
        phone: '',
        // 手机验证码
        code: '',
        psd: "",
        psdFocus: '',
        showPassword: false,
        ok: 0,
        countTime: 60,
        top: -500,
        msg: '账号或者密码错误',
      }
    },
    methods: {
      cleartext() {
        this.phone = ''
      },
      get() {
        this.ok = 1
        var Timer = setInterval(() => {
          this.countTime--
          if (this.countTime <= 0) {
            clearInterval(Timer)
            this.ok = 0
            this.countTime = 60
          }
        }, 1000)
      },
      // 验证手机号码
      isTelCode(str) {
        //正则表达式定义手机号正确格式
        let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
        if (!reg.test(str)) {
          this.msg = '请输入正确的手机号'
          this.top = 50
        }
      },
      // 关闭提示框
      changetop() {
        this.top = -500
      },
      // 登录
      register() {
        this.isTelCode(this.phone)
        if (this.phone == '' && this.code == '' && this.password == '' && this.password2 == '') {
          // 开启弹窗
          this.top = 50
          this.msg = '请按要求填入信息再登录'
        } else if (this.phone == '') {
          // 开启弹窗
          this.top = 50
          this.msg = '请输入手机号'
        } else if (this.password == '') {
          this.top = 50
          this.msg = '请输入密码'
        } else if (this.password2 == '') {
          this.top = 50
          this.msg = '请确定密码'
        } else if (this.code == '') {
          this.top = 50
          this.msg = '请输入验证码'
        }
      },
    }
  }
</script>

<style>
  .title {
    position: absolute;
    left: 50rpx;
    top: 230rpx;
    height: 50rpx;
    color: #3ca2e9;
    font-size: 42rpx;
    padding-bottom: 20rpx;
    font-weight: 600;
    border-bottom: 4rpx solid #fff;
  }

  .register {
    background-color: #fff;
    position: relative;
    height: calc(100vh-44px);
  }

  .bg-img {
    width: 100%;
    height: 520rpx;
  }

  .login-main {
    border-radius: 20rpx 20rpx 0 0;
    background-color: #fff;
    top: 336rpx;
    position: absolute;
    width: 100%;
    height: 700rpx;
    color: #fff;
    z-index: 99;
  }

  .login-btn {
    margin: 80rpx auto;
    width: 300rpx;
    height: 80rpx;
    border-radius: 40rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    font-weight: 600;
    /* letter-spacing: 20rpx; */
    box-shadow: 0rpx 8rpx 13rpx 0rpx rgba(106, 147, 199, 0.5);
    background: linear-gradient(to right, #3c74ed, #7e8edd);
  }

  .form {
    width: 600rpx;
    margin: 80rpx auto;
  }

  .item {
    width: 520rpx;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 42rpx;
  }

  .input-ui {
    width: 520rpx;
    color: #3c74ed;
    border-radius: 48rpx;
    font-size: 32rpx;
    margin: 0 auto;
    font-family: "Alibaba_bold";
    height: 80rpx;
    padding-left: 40rpx;
    box-shadow: 0rpx 8rpx 13rpx 0rpx rgba(106, 147, 199, 0.35);
  }

  input::input-placeholder {
    color: rgba(153, 153, 153, 1);
  }

  .showPwd {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }


  .text-icon-1 {
    width: 35rpx;
    height: 35rpx;
  }

  .text-icon-2 {
    width: 42rpx;
    height: 35rpx;
  }

  .input-code {
    width: 300rpx;
    color: #3c74ed;
    border-radius: 48rpx;
    font-size: 32rpx;
    font-family: "Alibaba_bold";
    height: 80rpx;
    padding-left: 40rpx;
    box-shadow: 0rpx 8rpx 13rpx 0rpx rgba(106, 147, 199, 0.35);
  }

  .getcode {
    width: 150rpx;
    height: 70rpx;
    font-size: 26rpx;
    /* background: #4f9ae8; */
    box-shadow: 0rpx 8rpx 13rpx 0rpx rgba(106, 147, 199, 0.35);
    border-radius: 10rpx;
    color: #3c74ed;
    font-weight: 600;
    text-align: center;
    line-height: 70rpx;
  }

  .msg {
    position: fixed;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s;
    width: 550rpx;
    border-radius: 20rpx;
    padding: 20rpx;
    z-index: 99;
    left: 50%;
    transform: translateX(-295rpx);
    background-color: #ffffff;
  }

  .yes {
    padding: 10rpx;
    width: 100rpx;
    text-align: center;
    font-size: 28rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    color: #ffffff;
    background: linear-gradient(to right, #3c74ed, #7e8edd);
  }

  .login-type {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-type image {
    width: 100%;
    height: 100%;
  }

  .login-more {
    width: 450rpx;
    margin: 40rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .login-more-con {
    margin-top: 100rpx;
  }

  .login-more-title {
    width: 600rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    color: #3c74ed;
    font-size: 26rpx;
    justify-content: space-between;
  }

  .line {
    width: 200rpx;
    height: 2rpx;
    background-color: #ccc;
  }

  .code-img {
    width: 400rpx;
    height: 400rpx;
  }

  .tip {
    font-size: 24rpx;
    color: #3c74ed;
    margin-top: 20rpx;
  }
  .text {
    color: #3c74ed;
  }
</style>
